{extend name="main"}
{block name="style"}
<style type="text/css">
	.el-input-group__prepend{padding: 0;}
	.el-input-group__prepend .el-cascader{line-height: 36px;min-width: 150px;}
	.el-input-group__prepend .el-input__inner{height: 36px;border: 0;}
    .search-bg{background-image: url(__TEMPLATE_STATIC__/home_searchbar_img_bg.png);background-size: 100% 100%;}
    .text-white a{color: #FFFFFF!important;}
</style>
{/block}
{block name="header"}
{include file="module/top_nav" container="container-xl"/}
{include file="module/header_concise"/}
{/block}
{block name="body"}
<div class="search-bg mb-3">
<div class="container-xl">
	<div class="search w-75 mx-auto py-5">
		<el-form @submit.native.prevent="setSearchItemKey" class="shadow">
			<el-input placeholder="请输入关键字" v-model="search.key" class="input-with-select"
			clearable>
			    <el-button native-type="submit" slot="append">搜索</el-button>
			</el-input>
		</el-form>
	</div>
</div>
</div>
<div class="container-xl position-relative text-666666">
	<div class="bg-white shadow p-3">
		<div class="flex border-bottom">
			<div class="w-100px py-3">工作区域：</div>
			<div class="flex-1 overflow-hidden"
			:style="showAllCity?'height:auto;':'height:40px'">
				<div class="row" v-if="arealist">
					<div class="col-auto pr-3 py-3 pointer" :class="{'text-primary':(search.province==''&&search.city==''&&search.area=='')}" @click="setSearchItemCity('')">不限</div>
					<div class="col-auto pr-3 py-3 pointer" v-for="(v,index) in arealist" :class="{'text-primary':(search.province==v.id||search.city==v.id||search.area==v.id)}" @click="setSearchItemCity(v)">{{v.title}}</div>
				</div>
				<div class="row border-top" v-show="city.length">
					<div class="col-auto pr-3 py-3 pointer" v-for="(v,index) in city" :class="{'text-primary':search.city==v.id}" @click="setSearchItemCity(v)">{{v.title}}</div>
				</div>
				<div class="row border-top" v-show="area.length">
					<div class="col-auto pr-3 py-3 pointer" v-for="(v,index) in area" :class="{'text-primary':search.area==v.id}" @click="setSearchItemCity(v)">{{v.title}}</div>
				</div>
			</div>
			<div class="py-3 pointer" @click="showAllCity= !showAllCity;">更多<i class="el-icon-caret-top ml-2" v-if="showAllCity"></i><i class="el-icon-caret-bottom ml-2" v-else="showAllCity"></i></div>
		</div>
		<div class="flex flex-center border-bottom">
			<div class="w-100px">企业规模：</div>
			<div class="flex-1">
				<div class="row">
					<div class="col-auto pr-3 py-3 pointer" :class="{'text-primary':search.size_type===''}" @click="setSearchItemSizeType('')">不限</div>
					<div class="col-auto pr-3 py-3 text-nowrap pointer" v-for="(v,index) in size_type" :class="{'text-primary':search.size_type===v.value}" @click="setSearchItemSizeType(v.value)">{{v.title}}</div>
				</div>
			</div>
		</div>
		<div class="flex flex-center border-bottom">
			<div class="w-100px">融资阶段：</div>
			<div class="flex-1">
				<div class="row">
					<div class="col-auto pr-3 py-3 pointer" :class="{'text-primary':search.finance===''}" @click="setSearchItemFinance('')">不限</div>
					<div class="col-auto pr-3 py-3 text-nowrap pointer" v-for="(v,index) in finance" :class="{'text-primary':search.finance===v.value}" @click="setSearchItemFinance(v.value)">{{v.title}}</div>
				</div>
			</div>
		</div>
		<div class="border-bottom flex flex-center">
			<div class="w-100px">所属行业：</div>
			<div class="flex-1">
				<div class="row"
				:style="showAllIndustry?'height: auto;overflow-x: hidden;overflow-y: auto;':'height: 53px;overflow:hidden;'">
					<div class="col-auto pr-3 py-3 pointer" :class="{'text-primary':search.industry==0}" @click="setSearchItemIndustry(0)">不限</div>
					<div class="col-auto px-3 py-3 text-nowrap pointer" v-for="(v,index) in industry" :class="{'text-primary':search.industry==v.id}" @click="setSearchItemIndustry(v.id)">{{v.title}}</div>
				</div>
			</div>
			<div class="py-3 pointer" @click="showAllIndustry= !showAllIndustry;">更多<i class="el-icon-caret-top ml-2" v-if="showAllIndustry"></i><i class="el-icon-caret-bottom ml-2" v-else="showAllIndustry"></i></div>
		</div>
		<div class="flex flex-center">
			<div class="flex-1"></div>
			<div class="pt-2 pointer" @click="clearSearchItem">清空筛选</div>
		</div>
	</div>
</div>
<div class="container-xl py-3">
	<div class="bg-white flex px-3 flex-center shadow text-666666">
		<div class="px-4 py-2 pointer" 
		:class="{'text-primary':search.prop=='default'}" 
		@click="setSearchItemProp('default')">综合排序<i class="el-icon-bottom ml-2 font-weight-bold"></i></div>
		<div class="px-4 py-2 pointer" 
		:class="{'text-primary':search.prop=='update_time'}" 
		@click="setSearchItemProp('update_time')">更新时间<i class="el-icon-bottom ml-2 font-weight-bold"></i></div>
		<div class="flex-1"></div>
		<div class="border-left px-4">{{search.current_page}} / {{search.last_page}}</div>
		<div class="px-4 pointer"
		@click="listViewType= !listViewType">{{listViewType?'详情':'列表'}}</div>
	</div>
	<div class="row pt-3 company-icon-list" v-if="!listViewType">
		<div class="col-3" v-for="(v,index) in list">
      		<div class="company-icon-item">
		      	<a :href="'/company/'+v.id+'.html'" target="_blank" class="text-dark p-3">
					<img :src="v.logo">
					<p class="text-truncate px-2 mb-0 pt-2">{{v.stitle?v.stitle:v.title}}</p>
					<div class="small text-secondary flex text-v-center mt-2">
						<div>{{v.size_type}}</div>
						<div class="border-left py-1 mx-1"></div>
						<div>{{v.industry}}</div>
					</div>
					<div class="border-top pt-3 mt-2 flex flex-center">
						<div class="flex-1">
							<div class="h6 text-primary">{{v.jobs_sum}}个</div>
							<div class="small">在招职位</div>
						</div>
						<div class="border-left py-3"></div>
						<div class="flex-1">
							<div class="h6 text-primary">{{v.resume_efficiency}}%</div>
							<div class="small">简历处理率</div>
						</div>
					</div>
				</a>
			</div>
      	</div>
	</div>
	<el-table
      :data="list"
      style="width: 100%"
      class="mt-3"
      header-cell-class-name="bg-light"
      v-else>
      <el-table-column
        prop="title"
        label="公司名称">
        <template slot-scope="scope">
		<a :href="'/company/'+scope.row.id+'.html'" target="_blank" class="h6 text-0143B1">
			{{scope.row.title}}
		</a>
        </template>
      </el-table-column>
      <el-table-column
        label="基本资料"
        width="280">
        <template slot-scope="scope">
		{{scope.row.size_type}}丨{{scope.row.industry}}
        </template>
      </el-table-column>
      <el-table-column
        prop="contacts_area"
        label="区域"
        width="180">
      </el-table-column>
      <el-table-column
        label="在招职位"
        width="80">
        <template slot-scope="scope">
		<a :href="'/jobs?company_id='+scope.row.id" target="_blank" class="h6 text-0143B1">
			{{scope.row.jobs_sum}}
		</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="resume_efficiency"
        label="简历处理率"
        width="100">
        <template slot-scope="scope">
			{{scope.row.resume_efficiency}}%
        </template>
      </el-table-column>
    </el-table>
	<div class="p-3 text-center text-secondary" v-if='list.length<=0&&!listViewType'>暂无数据</div>
	<div class="text-center mt-3 bg-white py-3 shadow" v-if='list.length>0'>
		<el-pagination
		  background
		  @current-change="handleCurrentChange"
		  layout="prev, pager, next"
	    :page-size="search.per_page"
		  :total="search.total">
		</el-pagination>
	</div>	
</div>
{/block}
{block name="footer"}
{include file="module/footer"/}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var arealist={xycms:arealist serialize="json"/};
	var industry={xycms:industry serialize="json"/};
	var finance={xycms:statusalias name="company/finance" serialize="json"/};
	var size_type={xycms:statusalias name="company/size_type" serialize="json"/};
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			loginTabs:XYBase.loginTabs,
			userInfo:UserInfo,
			feedback:XYBase.feedback,
			hoverCityKey:'A',
			showAllCity:false,
			showAllIndustry:false,
			listViewType:false,
			arealist:arealist,
			city:[],
			area:[],
			industry:industry,
			finance:finance,
			size_type:size_type,
			search:{
				ajax:false,
				key:'{notempty name=":request()->get('key')"}{:request()->get('key')}{/notempty}',
				city:'',
				industry:0,
				finance:'',
				size_type:'',
				is_famous:0,
				prop:'default',
				per_page:10,
				current_page:0,
				last_page:0,
				total:0,
				page:{:request()->get('page',1)}
			},
			list:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
		    listViewType(val,oldVal){
		    	if(val){
		    		XYBase.setCookie('companyListViewType',1);
		    	}else{
		    		XYBase.delCookie('companyListViewType');
		    	}
		    }
		},
		created(){
			XYBase.created(this);
			this.listViewType=XYBase.getCookie('companyListViewType')?true:false;
			this.initHtml();
		},
		methods:XYBase.methods({
			setSearchItemCity(val){
			    this.search.province='';
			    this.search.city='';
			    this.search.area='';
			    if(val){
			        switch(val.level){
			            case 1:
				        this.search.province=val.id;
				        this.city=val.data;
			    			this.area=[];
			            break;
			            case 2:
				        this.search.city=val.id;
				        this.area=val.data;
			            break;
			            case 3:
				        this.search.area=val.id;
			            break;
			        }
			    }else{
			    	this.city=[];
			    	this.area=[];
			    }
				this.search.page=1;
				this.initHtml();
			},
			setSearchItemIndustry(val){
				this.search.industry=val;
				this.search.page=1;
				this.initHtml();
			},
			setSearchItemFinance(val){
				this.search.finance=val;
				this.search.page=1;
				this.initHtml();
			},
			setSearchItemSizeType(val){
				this.search.size_type=val;
				this.search.page=1;
				this.initHtml();
			},
			setSearchItemKey(){
				this.search.page=1;
				this.initHtml();
			},
			setSearchItemProp(val){
				this.search.prop=val;
				this.search.page=1;
				this.initHtml();
			},
			setSearchItemIsFamous(val){
				this.search.is_famous=val;
				this.search.page=1;
				this.initHtml();
			},
			clearSearchItem(){
				this.search.page=1;
				this.search.key='';
				this.search.city='';
				this.search.industry=0;
				this.search.finance='';
				this.search.size_type='';
				this.initHtml();
			},
			handleCurrentChange(val){
				this.search.page=val;
				this.initHtml();
			},
			initHtml(){
				var _this=this;
				if (_this.search.ajax) return XYBase.msg('操作频繁，请稍后再试');
				_this.search.ajax=true;
				_this.sendGet({
					url:'/search/company',
					data:_this.search
				},function(ret){
					_this.search.ajax=false;
					if (ret) {
						_this.list=[];
						if (ret.code === 0) {
							_this.search.total=ret.data.total;
							_this.search.per_page=ret.data.per_page;
							_this.search.current_page=ret.data.current_page;
							_this.search.last_page=ret.data.last_page;
							_this.list=ret.data.data;
						}else{
							XYBase.msg(ret.msg);
							_this.search.current_page=0;
							_this.search.last_page=0;
						}
					}
				});
			},
		})
	});
</script>
{/block}